<template>
  <!--头部区域-->
  <YanXuanHeader></YanXuanHeader>
  <!--切换手机或邮箱登录界面-->
  <div class="wrap" v-if="showForm">
    <!--品牌LOGO-->
    <div class="logoWrap">
      <img class="logoImg" src="@/views/Login/images/static-union_164793255107785e.png" />
    </div>
    <!--切换手机或邮箱登录按钮-->
    <div class="btnWrap">
      <van-row justify="center">
        <van-col span="21">
          <van-button type="danger" size="large" icon="phone-o" class="mb-20"
            @click="toForm('phoneMessage')">手机号快捷登录</van-button>
        </van-col>
      </van-row>
      <van-row justify="center">
        <van-col span="21">
          <van-button plain hairline type="primary" size="large" color="#da3231" icon="envelop-o"
            @click="toForm('mail')">邮箱账号登录</van-button>
        </van-col>
      </van-row>
    </div>
    <!--底部图标-->
    <div class="iconWrap">
      <div class="iconItem">
        <i class="weixin"></i><a href="https://open.weixin.qq.com/sns/explorer_broker?appid=wx78d6e265b4045e39&redirect_uri=https%3A%2F%2Freg.163.com%2FouterLogin%2Foauth2%2Fweixin_connect.do%3Furl%3Dhttps%253A%252F%252Fm.you.163.com%252Fu%252FaccountRelate%252FloginTransferStation%253Fcallback%253Dhttps%25253A%25252F%25252Fm.you.163.com%25252Fucenter%26url2%3Dhttps%253A%252F%252Fm.you.163.com%252Fu%252FaccountRelate%252FloginTransferStation%253Fcallback%253Dhttps%25253A%25252F%25252Fm.you.163.com%25252Fucenter%26product%3Dyanxuan_web%26urs_tg%3D6&response_type=code&scope=snsapi_userinfo&display=default&connect_redirect=1#wechat_redirect">微信</a>
      </div>
      <div class="iconItem">
        <i class="qq"></i><a href="https://xui.ptlogin2.qq.com/cgi-bin/xlogin?appid=716027609&pt_3rd_aid=101330628&daid=383&pt_skey_valid=0&style=35&s_url=https%3A%2F%2Fconnect.qq.com&refer_cgi=authorize&which=&sdkp=pcweb&sdkv=v1.0&time=1672110895&loginty=3&h5sig=hYESiVm8mTeqrbMFIZr1nDFONBjAEuVSbaNmrQE1ExI&client_id=101330628&redirect_uri=https%3A%2F%2Freg.163.com%2FouterLogin%2Foauth2%2Ftencent_connect.do%3Furl%3Dhttps%253A%252F%252Fm.you.163.com%252Fu%252FaccountRelate%252FloginTransferStation%253Fcallback%253Dhttps%25253A%25252F%25252Fm.you.163.com%25252Fucenter%26url2%3Dhttps%253A%252F%252Fm.you.163.com%252Fu%252FaccountRelate%252FloginTransferStation%253Fcallback%253Dhttps%25253A%25252F%25252Fm.you.163.com%25252Fucenter%26product%3Dyanxuan_web%26urs_tg%3D1&response_type=code&state=27d14bf5abca3c150bc635f619be6cff&scope=snsapi_base">QQ</a>
      </div>
      <div class="iconItem">
        <i class="weibo"></i><a href="https://api.weibo.com/oauth2/authorize?client_id=881117822&redirect_uri=https%3A%2F%2Freg.163.com%2FouterLogin%2Foauth2%2Fsina_connect.do%3Furl%3Dhttps%253A%252F%252Fm.you.163.com%252Fu%252FaccountRelate%252FloginTransferStation%253Fcallback%253Dhttps%25253A%25252F%25252Fm.you.163.com%25252Fucenter%26url2%3Dhttps%253A%252F%252Fm.you.163.com%252Fu%252FaccountRelate%252FloginTransferStation%253Fcallback%253Dhttps%25253A%25252F%25252Fm.you.163.com%25252Fucenter%26product%3Dyanxuan_web%26display%3Dmobile%26urs_tg%3D3&response_type=code&scope=snsapi_base&forcelogin=true&display=wap">微博</a>
      </div>
    </div>
  </div>
  <!--登录页面的样式-->
  <div class="phoneLoginWrap" v-else>
    <!--登录页面LOGO-->
    <div class="phoneLoginLogoWrap">
      <img class="logoImg" src="@/views/Login/images/static-union_164793255107785e.png" />
    </div>
    <!--短信登录表单-->
    <div class="messageFormWrap" v-if="showFormType === 'phoneMessage'">
      <van-form>
        <van-field placeholder="请输入手机号" type="tel" class="mt-20"></van-field>
        <van-field placeholder="请输入短信验证码" type="number" class="mt-20">
          <template #button>
            <van-button size="small">获取验证码</van-button>
          </template>
        </van-field>
        <!--文字和按钮区域-->
        <div class="text">
          <span class="left" href="javascript:;">没有账号?点击<routerLink to="/register"><i>注册账号</i></routerLink>
          </span><a class="right" href="javascript:;" @click="showFormType = 'password'">使用密码验证登录</a>
        </div>
        <!--登录按钮-->
        <div class="loginBtnWrap">
          <van-button block color="#da3231">登录</van-button>
        </div>
        <!--协议复选框-->
        <van-field type="checkbox">
          <template #input>
            <div class="agreeWrap">
              <van-checkbox shape="square" icon-size="14px" />
              <span class="agree">同意<a href="https://reg.163.com/agreement_mobile_wap.shtml?v=20171127" target="_blank">《服务条款》</a>和<a href="https://m.you.163.com/help/new#/37/73" target="_blank">《隐私政策》</a>和<a
                  href="https://m.you.163.com/help/new#/37/70" target="_blank">《网易严选服务协议》</a></span>
            </div>
          </template>
        </van-field>
      </van-form>
    </div>
    <!--邮箱登录表单-->
    <div class="mailFormWrap" v-else-if="showFormType === 'mail'">
      <van-form>
        <van-field placeholder="邮箱账号" type="tel" class="mt-10"></van-field>
        <van-field placeholder="密码" type="text" class="mt-10"></van-field>
        <!--文字和按钮区域-->
        <div class="text">
          <a class="left" href="javascript:;">注册账号</a><a class="right" href="javascript:;">忘记密码</a>
        </div>
        <!--登录按钮-->
        <div class="loginBtnWrap">
          <van-button block color="#da3231">登录</van-button>
        </div>
      </van-form>
    </div>
    <!--密码登录表单-->
    <div class="passwordFormWrap" v-else>
      <van-form ref="passwordForm">
        <van-field v-model="passwordFormData.phone" focus placeholder="请输入手机号" type="tel" class="mt-10" :rules="[{ required: true, message: '请输入手机号', trigger: 'onBlur' },
{ pattern: /^1[3-9][0-9]{9}$/, message: '手机号格式不正确', trigger: 'onBlur' }]"></van-field>
        <van-field v-model="passwordFormData.password" focus placeholder="请输入密码" type="text" class="mt-10"
          :rules="[{ required: true, message: '请输入密码', trigger: 'onBlur' }]"></van-field>
        <!--文字和按钮区域-->
        <div class="text">
          <a class="left" href="javascript:;">忘记密码?</a><a class="right" href="javascript:;"
            @click="showFormType = 'phoneMessage'">短信快捷登录</a>
        </div>
        <!--登录按钮-->
        <div class="loginBtnWrap">
          <van-button block color="#da3231" @click="login">登录</van-button>
        </div>
      </van-form>
    </div>


    <!--其他登录方式-->
    <div class="loginOtherWay" @click="toOtherWay">其他登录方式<van-icon name="arrow" /></div>
  </div>

</template>

<script setup lang="ts">
import YanXuanHeader from '@/components/YanXuanHeader/index.vue'
import { Form, Field, CellGroup } from 'vant';
import { ref } from 'vue'
import { useUserStore } from '@/stores/user';
import { useRouter, useRoute } from 'vue-router';
//获取密码表单组件实例
const passwordForm = ref()
//定义一个标识,标记当前显示按钮页还是表单页
let showForm = ref(true)
//定义变量,记录跳转的具体表单页
let showFormType = ref('phoneMessage')
//点击手机号快捷登录和邮箱账号登录按钮的回调
const toForm = (formType: string) => {
  //修改状态,展示表单页面
  showForm.value = !showForm.value
  //获取参数,修改要展示的具体表单类型
  showFormType.value = formType
}
//点击其他登录方式的回调,回到点击手机号快捷登录和邮箱账号登录按钮页面,重置表单类型
const toOtherWay = () => {
  showForm.value = !showForm.value
  showFormType.value = 'phoneMessage'
}


//密码登录表单
//登录用的数据
let passwordFormData = ref({
  phone: '',
  password: ''
})
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
//收集表单数据发送请求
const login = async () => {
  try {
    //进行表单验证
    await passwordForm.value.validate()
    //获取表单数据
    let { phone, password } = passwordFormData.value
    try {
      await userStore.login({ phone, password })
      //获取要去的路由地址
      let toPath = route.query.redirect
      //跳转到要去的路由,如果参数中有就去到要去的路由,没有就跳到个人中心页
      if (toPath) {
        router.push(toPath as string)
      } else {
        router.push('/ucenter')
      }

    } catch (error) {
      console.log(error)
    }
  } catch (error) {
    console.log(error)
  }

}
</script>


<style scoped>
/*切换手机或邮箱登录界面容器样式 */
.wrap {
  height: calc(100% - 1.1733rem);
  background-color: #f2f5f4;
  position: relative;
}

/*品牌LOGO样式 */
.logoImg {
  width: 3.5733rem;
  height: 1.2rem;
}

.logoWrap {
  padding: 2.1333rem 0rem 0rem;
  display: flex;
  justify-content: center;
}

/*切换手机或邮箱按钮相关样式 */
.btnWrap {
  padding: 1.3333rem 0rem 0rem;
}

/*底部图标样式 */
.iconWrap {
  position: absolute;
  width: 100%;
  left: 0rem;
  bottom: 1.0667rem;
  justify-content: center;
  display: flex;

}

.iconWrap .iconItem {
  display: flex;
  align-items: center;
  padding: 0rem .5333rem;
  border-right: .0267rem solid #979797;
}

.iconWrap :last-child {
  border-right: none;
}

.iconWrap i {
  display: inline-block;
  width: .5333rem;
  height: .5333rem;
  background-size: 98%;
}

.iconWrap a {
  display: inline-block;
  font-size: 14px;
  color: #7f7f7f;
  margin-left: 2.5012px;

}

.weixin {
  background: url(@/views/Login/images/weixin.png) no-repeat;
}

.qq {
  background: url(@/views/Login/images/qq.png) no-repeat;
}

.weibo {
  background: url(@/views/Login/images/weibo.png) no-repeat;
}

/*登录页LOGO样式 */
.phoneLoginLogoWrap {
  padding: .7467rem 0rem 0rem;
  display: flex;
  justify-content: center;
}

/*短信登录页表单样式 */
.messageFormWrap {
  margin: .5333rem 0rem;
  padding: 0rem .2667rem;
}

/*文字和按钮区域*/
.agreeWrap {
  display: flex;
  align-items: baseline;
}

.loginBtnWrap {
  padding: 0rem .4rem;
}

.text {
  margin: .5333rem 0px .4267rem;
  padding: 0rem .4rem;
  display: flex;
  justify-content: space-between;
}

.text a,
span {
  font-size: .3733rem;

}

.text i {
  color: #007Aff;
  text-decoration: underline;
  font-style: normal;
}

.text .right {
  font-weight: bolder;
}

.text .left {
  color: #979797;
}

.agree {
  font-size: .32rem;

}

.agree a {
  color: #007Aff;
}

/*其他登录方式样式*/
.loginOtherWay {
  width: 100%;
  height: .5333rem;
  line-height: .5333rem;
  font-size: .3733rem;
  text-align: center;
  color: #333333;
  margin-top: .5333rem;
}

/*密码和邮箱登录页表单样式 */
.passwordFormWrap,
.mailFormWrap {
  margin: .5333rem 0rem;
  padding: 1.5232rem .2667rem 1.1424rem;
}

/*邮箱登录中字体样式 */
.mailFormWrap .right {
  font-weight: 100;
}
</style>